<%--
  Created by IntelliJ IDEA.
  User: kwc13
  Date: 2023-12-21
  Time: 下午 04:42
  To change this template use File | Settings | File Templates.
--%>
<!-- 标记为HTML格式 -->
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ page isELIgnored="false" %>
<!-- 设置页面为Chain -->
<html lang="ch">
<head>
    <title>我的购物车</title>
    <!-- 设置地址栏主题背景颜色 -->
    <meta name="theme-color" content="#000000">
    <!-- 页面描述 -->
    <meta name="description" content="页面描述信息">
    <!-- 移动端显示 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 页面Logo -->
    <link rel="shortcut icon" href="http://localhost:8083/resource_packs/images/logo.png">
    <!--
    导入Jquery、请求js、value工具类、input工具类、页面js、页面样式css
    ${pageContext.request.contextPath}:获取当前 web 应用的上下文路径
    -->
    <script src="${pageContext.request.contextPath}/other/component/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
    <script src="${pageContext.request.contextPath}/other/resource/aes_key_util.js"></script>
    <script src="${pageContext.request.contextPath}/other/request/reception_desk/index.js"></script>
    <script src="${pageContext.request.contextPath}/other/request/reception_desk/shopping_cart.js"></script>
    <script src="${pageContext.request.contextPath}/other/request/reception_desk/commodity_insurance.js"></script>
    <script src="${pageContext.request.contextPath}/other/resource/value_util.js"></script>
    <script src="${pageContext.request.contextPath}/other/scripts/reception_desk/shopping_cart.js"></script>
    <link href="${pageContext.request.contextPath}/other/style/reception_desk/shopping_cart.css" rel="stylesheet"
          type="text/css"/>
</head>
<body>
<div class="body" >
    <div class="function">
        <div class="function-protect">
            <div class="title">
                <div class="logo">
                    <img src="http://localhost:8083/resource_packs/images/logo.png" alt="小米Logo">
                </div>
                <div class="function-title">
                    <h1>我的购物车</h1>
                </div>
                <div class="function-hint">
                    <span>温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算</span>
                </div>
            </div>
            <jsp:useBean id="status" scope="request" type="java.lang.Integer"/>
            <div class="other-function">
                <ul class="block">
                    <c:if test="${status != 3}">
                        <jsp:useBean id="name" scope="request" type="java.lang.String"/>
                        <li class="user-name options drop-down">
                            <a href="" class="drop-down-menu">
                                    ${name}
                                <img src="http://localhost:8083/resource_packs/images/drop_down.png"
                                     class="options-img"
                                     alt="下拉菜单">
                            </a>
                        </li>
                        <li>
                            <span class="fill-entity">|</span>
                        </li>
                        <li class="options">
                            <a href="">我的订单</a>
                        </li>
                    </c:if>
                    <c:if test="${status == 3}">
                        <li>
                            <a href="${pageContext.request.contextPath}/login">登陆</a>
                        </li>
                        <li>
                            <span class="fill-entity">|</span>
                        </li>
                        <li>
                            <a href="${pageContext.request.contextPath}/login?menu=1">注册</a>
                        </li>
                    </c:if>
                </ul>
                <div class="more drop-down" style="z-index: 3;position: absolute">
                    <ul>
                        <li>
                            <a class="go-personal-center">个人中心</a>
                        </li>
                        <li>
                            <a class="go-personal-center">评价晒单</a>
                        </li>
                        <li>
                            <a class="go-personal-center">我的喜欢</a>
                        </li>
                        <li>
                            <a href="">小米账户</a>
                        </li>
                        <li>
                            <a class="login-out">退出登录</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="center-shopping">
        <jsp:useBean id="shoppingCartList" scope="request" type="java.util.List"/>
        <c:if test="${status == 2}">
        <div style="">
            <form>
                <div class="shopping-cat">
                    <div class="product-information">
                        <div class="product-title product-choose">
                            <label>
                                <!-- 判断购物车是否全部被选中 -->
                                <c:set var="allSelected" value="true"/>
                                <c:forEach var="shoppingCart" items="${shoppingCartList}">
                                    <c:if test="${shoppingCart.isSelectedStatus != 1 && shoppingCart.commodity.commodityState == 0}">
                                        <c:set var="allSelected" value="false"/>
                                    </c:if>
                                </c:forEach>

                                <c:choose>
                                    <c:when test="${allSelected}">
                                        <jsp:useBean id="informationId" scope="request" type="java.lang.Integer"/>

                                        <!-- 所有isSelectedStatus属性都为1 -->
                                        <input type="checkbox" name="running" checked class="choose-product"
                                               information-id="${informationId}">
                                    </c:when>
                                    <c:otherwise>
                                        <!-- 存在isSelectedStatus属性不为1的情况 -->
                                        <input type="checkbox" name="running" class="choose-product"
                                               information-id="${informationId}">
                                    </c:otherwise>
                                </c:choose>
                            </label>
                            <span>全选</span>
                        </div>
                        <div class="product-title commodity-name">
                            <span>商品姓名</span>
                        </div>
                        <div class="product-title commodity-price">
                            <span>单价</span>
                        </div>
                        <div class="product-title commodity-quantity">
                            <span>数量</span>
                        </div>
                        <div class="product-title commodity-subtotal">
                            <span>小计</span>
                        </div>
                        <div class="product-title commodity-operate">
                            <span>操作</span>
                        </div>
                    </div>
                    <c:set var="selectedCount" value="0"/>
                    <c:forEach var="shoppingCart" items="${shoppingCartList}">
                        <c:if test="${shoppingCart.isSelectedStatus == 1 && shoppingCart.commodity.commodityState == 0}">
                            <c:set var="selectedCount" value="${selectedCount + shoppingCart.quantity}"/>
                        </c:if>
                        <div class="new-commodity" style="${shoppingCart.commodity.commodityState != 0 ?
                                'background-color:#FAFAFA' : ''} ${shoppingCart.isSelectedStatus == 1 && shoppingCart.commodityGifts != null ? 'border-bottom: 1px solid #ffffff;' : 'border-bottom: 1px solid #E0E0E0;'}">
                            <div class="product-choose">
                                <c:if test="${shoppingCart.commodity.commodityState != 0}">
                                    <span class="off" style="margin-top: 50px;">下架</span>
                                </c:if>
                                <c:if test="${shoppingCart.commodity.commodityState == 0}">
                                    <label>
                                        <!-- 自定义样式 -->
                                        <input type="checkbox" name="running"
                                               shopping-cart-id="${shoppingCart.shoppingCartId}"
                                            ${shoppingCart.isSelectedStatus == 1 ? 'checked' : ''}
                                               class="new-product">
                                    </label>
                                </c:if>
                            </div>
                            <div class="new-img">
                                <img src="http://localhost:8083/resource_packs/images/${shoppingCart.commodity.commodityImages}"
                                     class="commodity-img"
                                     alt="购物车商品图片">
                            </div>
                            <div class="new-name">
                                <span class="commodity-name" title="${shoppingCart.commodity.commodityName}">
                                        ${shoppingCart.commodity.commodityName}
                                </span>
                            </div>
                            <div class="unit-price">
                                <span class="commodity-price">${shoppingCart.commodity.commodityPrice} 元</span>
                            </div>
                            <div class="quantity">
                                <c:if test="${shoppingCart.commodity.commodityState != 0}">

                                        <span class="number" style="background: #FAFAFA;
                                        border: 1px solid #FAFAFA;font-size: 13px;
                                        margin: 40px auto auto;">${shoppingCart.quantity}</span>

                                </c:if>
                                <c:if test="${shoppingCart.commodity.commodityState == 0}">
                                    <div class="new-quantity">
                                        <div class="new-reduce new-border"
                                             shopping-cart-id="${shoppingCart.shoppingCartId}">
                                            <img src="http://localhost:8083/resource_packs/images/subtract.png"
                                                 alt="-">
                                        </div>
                                        <label>
                                            <input class="number" type="text"
                                                   details-inventory="${shoppingCart.commodity.commodityWarehouse.detailsInventory}"
                                                   purchase-limit="${shoppingCart.commodity.commodityWarehouse.purchaseLimit}"
                                                   shopping-cart-id="${shoppingCart.shoppingCartId}"
                                                   value="${shoppingCart.quantity}">
                                        </label>
                                        <div class="new-add new-border" details-inventory="${shoppingCart.commodity.
                                                 commodityWarehouse.detailsInventory}"
                                             purchase-limit="${shoppingCart.commodity.
                                                 commodityWarehouse.purchaseLimit}"
                                             shopping-cart-id="${shoppingCart.shoppingCartId}">
                                            <img src="http://localhost:8083/resource_packs/images/add.png"
                                                 alt="+"></div>
                                    </div>
                                </c:if>
                                <p class="quantity-hint"></p>
                            </div>
                            <c:set var="insuranceTotalPrice" value="0"/>
                            <!-- 商品保险总额 -->
                            <c:forEach var="commodityInsuranceList" items="${shoppingCart.commodityInsuranceList}">
                                <c:set var="insuranceTotalPrice"
                                       value="${insuranceTotalPrice + commodityInsuranceList.addPrice}"/>
                            </c:forEach>
                            <div class="subtotal">
                                <!-- 小计 -->
                                <span style="color: #FF6700;"><a class="subtotal-quantity">
                                        ${(shoppingCart.commodity.commodityPrice*shoppingCart.quantity)+insuranceTotalPrice}
                                </a>元</span>
                            </div>
                            <div class="delete">
                                <img src="http://localhost:8083/resource_packs/images/pop_ups_closes.png"
                                     class="delete-img" alt="删除"
                                     shopping-cart-id="${shoppingCart.shoppingCartId}">
                            </div>
                        </div>
                        <c:if test="${shoppingCart.isSelectedStatus == 1 && shoppingCart.commodity.commodityState == 0}">
                            <c:if test="${shoppingCart.commodity.commodityState == 0 && shoppingCart.commodityGifts != null}">
                                <div class="commodity-insurance">
                                <div class="insurance">
                                    <div class="insurance-img">
                                        <img src="http://localhost:8083/resource_packs/images/${shoppingCart.commodityGifts.commodity.commodityImages}"
                                             alt="赠品图片">
                                    </div>
                                    <div class="insurance-text">
                                        <div class="gifts">
                                            赠品
                                        </div>
                                        <div class="insurance-title">
                                            <span>${shoppingCart.commodityGifts.commodity.commodityName}</span>
                                        </div>
                                    </div>
                                    <div class="insurance-number" style="margin-left: 18%;">
                                        <a>1</a>
                                        <c:set var="selectedCount" value="${selectedCount + 1}"/>
                                    </div>
                                </div>
                            </c:if>
                            <c:forEach var="commodityInsuranceList" items="${shoppingCart.commodityInsuranceList}">
                                <div class="insurance">
                                    <div class="insurance-img">
                                        <img src="http://localhost:8083/resource_packs/images/${commodityInsuranceList.insuranceType.insuranceTypeLogo}"
                                             alt="保险图标">
                                    </div>
                                    <div class="insurance-text">
                                        <div class="insurance-title">
                                            <span>${commodityInsuranceList.insuranceTitle}</span>
                                        </div>
                                        <div class="insurance-context">
                                            <a>${commodityInsuranceList.insuranceContext}</a>
                                        </div>
                                    </div>
                                    <div class="insurance-price">
                                        <c:if test="${commodityInsuranceList.addPrice != null}">
                                            <span>${commodityInsuranceList.addPrice}</span>
                                        </c:if>
                                        <c:if test="${commodityInsuranceList.addPrice == null}">
                                            <span>免费</span>
                                        </c:if>
                                    </div>
                                    <div class="insurance-number">
                                        <a>1</a>
                                        <c:set var="selectedCount" value="${selectedCount + 1}"/>
                                    </div>
                                    <div class="insurance-total-price">
                                        <c:if test="${commodityInsuranceList.addPrice != null}">
                                            <span>${commodityInsuranceList.addPrice} 元</span>
                                        </c:if>
                                        <c:if test="${commodityInsuranceList.addPrice == null}">
                                            <span>免费</span>
                                        </c:if>
                                    </div>
                                    <div class="insurance-remove">
                                        <img src="http://localhost:8083/resource_packs/images/pop_ups_closes.png"
                                             class="delete-insurance-img" alt="删除"
                                             commodity-insurance-id="${commodityInsuranceList.insuranceId}"
                                             shopping-cart-id="${shoppingCart.shoppingCartId}"
                                             commodity-insurance-ids="${shoppingCart.insuranceIds}">
                                    </div>
                                </div>
                            </c:forEach>
                            <c:if test="${shoppingCart.merchandiseInsuranceNotAddedList != null}">
                                <c:forEach items="${shoppingCart.merchandiseInsuranceNotAddedList}"
                                           var="merchandiseInsuranceNotAddedList">
                                    <div class="not-selected-commodity-insurance"
                                         information-ids="${shoppingCart.insuranceIds}"
                                         shopping-cart-id="${shoppingCart.shoppingCartId}"
                                         commodity-insurance-id="${merchandiseInsuranceNotAddedList.insuranceId}">
                                        <div class="add-commodity-insurance-img">
                                            <img src="http://localhost:8083/resource_packs/images/add_commodity_insurance.png"
                                                 alt="添加商品保险">
                                        </div>
                                        <div class="add-commodity-insurance-context">
                                            <span>${merchandiseInsuranceNotAddedList.insuranceContext}</span>
                                            <c:if test="${merchandiseInsuranceNotAddedList.insurancePreferential != null}">
                                                <a>(已省${merchandiseInsuranceNotAddedList.insurancePreferential}元)</a>
                                            </c:if>
                                            <a class="understand-commodity-insurance-context">
                                                    ${merchandiseInsuranceNotAddedList.insuranceTitle} >
                                            </a>
                                        </div>
                                    </div>
                                </c:forEach>
                            </c:if>
                            </div>

                        </c:if>
                    </c:forEach>
                </div>
            </form>

            <div style="text-align: center;">
                <div class="price-calculation">
                    <div class="number-pieces">
                        <ul>
                            <jsp:useBean id="accountId" scope="request" type="java.lang.Integer"/>
                            <li style="width: 70px">
                                <a href="${pageContext.request.contextPath}/shop?acccountId=${accountId}"
                                   class="front">继续购物</a>
                            </li>
                            <li>
                                <div class="total-fill"></div>
                            </li>
                            <li style="width: 100px">
                                <a>
                                    已经选择
                                    <span class="total-number">
                                            ${selectedCount}
                                    </span>
                                    件
                                </a>
                            </li>
                        </ul>
                    </div>
                    <!-- 计算已选中商品的总价 -->
                    <c:set var="totalPrice" value="0"/>
                    <c:forEach var="shoppingCart" items="${shoppingCartList}">
                        <c:if test="${shoppingCart.isSelectedStatus == 1 && shoppingCart.commodity.commodityState == 0}">
                            <c:set var="totalInsurancePrice" value="0"/>
                            <c:forEach var="commodityInsuranceList" items="${shoppingCart.commodityInsuranceList}">
                                <c:set var="totalInsurancePrice"
                                       value="${totalInsurancePrice + commodityInsuranceList.addPrice}"/>
                            </c:forEach>
                            <c:set var="price"
                                   value="${(shoppingCart.commodity.commodityPrice * shoppingCart.quantity)+totalInsurancePrice}"/>
                            <c:set var="totalPrice" value="${totalPrice + price}"/>
                        </c:if>
                    </c:forEach>
                    <div class="total-cost">
                        <a>合计:
                            <span class="total-price">${totalPrice}</span>
                            元
                        </a>
                    </div>
                    <div class="settlement">
                        <jsp:useBean id="isItemsShoppingCartSelected" scope="request" type="java.lang.Boolean"/>
                        <a class="settlement-price"
                           account-id="${accountId}"
                           is-items-shopping-cart-selected="${isItemsShoppingCartSelected}"
                           information-id="${informationId}"
                           style="${isItemsShoppingCartSelected == true ?
                       'color: #fff;background-color: #FF6700;' : 'background-color: #E0E0E0;color:#b0b0b0'}">
                            去结算
                        </a>
                    </div>
                </div>
            </div>
            </c:if>
            <c:if test="${status != 2}">
                <div class="empty-shopping-cart">
                    <img src="http://localhost:8083/resource_packs/images/cart-empty.png" alt="空购物车">
                    <div class="remind">
                        <b>您的购物车还是空的！</b>
                        <c:if test="${status == 3}">
                            <p>登录后将显示您之前加入的商品</p>
                            <button class="login-button">立即登录</button>
                            <button class="go-shopping">马上去购物</button>
                        </c:if>
                        <c:if test="${status == 1}">
                            <button class="empty-go-shopping" account-id="${accountId}">马上去购物</button>
                        </c:if>
                    </div>
                </div>
            </c:if>
            <div>
                <div class="commodity-title" style="${status != 2 ? 'width: 100%;' : ''}">
                    <div class="shopping-title" style="${status != 2 ? 'margin-left: 340px;' : ''}">
                        <a>${status != 2 ? '为您推荐' : '买购物车中商品的人还买了'}</a>
                    </div>
                </div>
                <div class="other" style="${status != 2 ? 'width: 105%;' : ''}">
                    <jsp:useBean id="randomCommodities" scope="request" type="java.util.List"/>
                    <div class="commodity-shopping" style="${status != 2 ? 'width: 100%;': ''}">

                        <c:forEach var="commodities" items="${randomCommodities}" varStatus="status">
                            <div class="commodity" style="${status.index % 5 == 0 ? 'margin-left: 0px;' : ''}">
                                <div class="commodity-img">
                                    <img src="http://localhost:8083/resource_packs/images/${commodities.commodityImages}"
                                         class="img"
                                         alt="商品图片">
                                </div>
                                <div class="shopping-name">
                                    <a class="product-name">${commodities.commodityName}</a>
                                </div>
                                <div class="shopping-price">
                                    <a class="product-price">${commodities.commodityPrice}元</a>
                                </div>
                                <div class="good-reviews">
                                    <a>${commodities.commodityComment.commentsSatisfaction}人好评</a>
                                </div>
                                <div class="whether-join">
                                    <a class="add-shopping" commodities-id="${commodities.commodityId}"
                                       commodity-id="${commodities.commodityId}"
                                       information-id="${informationId}">
                                        加入购物车
                                    </a>
                                </div>
                            </div>
                        </c:forEach>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 隐藏部分 -->
<div class="hint-remove" style="display: none">
    <div class="blinded">
    </div>
    <div class="remove-text">
        <div class="remove-character">
            <div class="remove">
                <img src="http://localhost:8083/resource_packs/images/pop_ups_closes.png"
                     class="remove-img" alt="关闭">
            </div>
            <h1 class="remove-word">确认删除所选商品吗？</h1>
            <div class="delete-button">
                <div class="remove-button">确定</div>
                <div class="cancel" style="margin-left: 20px;">取消</div>
            </div>
        </div>
    </div>
</div>
<!-- 隐藏部分 -->
<div class="hint-remove" style="display: none">
    <div class="blinded">
    </div>
    <div class="remove-text">
        <div class="remove-character">
            <div class="remove">
                <img src="http://localhost:8083/resource_packs/images/pop_ups_closes.png"
                     class="remove-img" alt="关闭">
            </div>
            <h1 class="remove-word">确认删除所选商品吗？</h1>
            <div class="delete-button">
                <div class="remove-button">确定</div>
                <div class="cancel" style="margin-left: 20px;">取消</div>
            </div>
        </div>
    </div>
</div>
<!-- 隐藏部分 -->
<div class="hint-remove" style="display: none">
    <div class="blinded">
    </div>
    <div class="remove-text">
        <div class="remove-character">
            <div class="insurance-close-window">
                <img src="http://localhost:8083/resource_packs/images/pop_ups_closes.png"
                     class="remove-img" alt="关闭">
            </div>
            <div class="insurance-word">
                <div class="insurance-title">
                    <h3>购买服务</h3>
                </div>
                <div class="insurance-body-window">
                    <div class="insurance-img-window">
                        <img src="http://localhost:8083/resource_packs/images/cloud_space.png" alt="保险图标">
                    </div>
                    <div class="insurance-body">
                        <span class="insurance-body-title">
                            碎屏保 1年
                        </span>
                        <p class="insurance-desc-window">
                        </p>
                        <p class="insurance-article-window">
                            <label>
                                <input type="checkbox" name="reading" class="insurance-article-checkbox">
                                <span>我已阅读<a>服务条款</a>|<a>常见问题</a></span>
                            </label>
                        </p>
                    </div>
                </div>
            </div>
            <div class="sure-button">
                <button class="sure-button-window">确定</button>
            </div>
        </div>
    </div>
</div>
<!-- jsp:include导入网页尾部 jsp:param向该页面传值 -->
<jsp:include page="/WEB-INF/page/reception_desk/footer_page.jsp" flush="true">
    <jsp:param name="id" value="1"/>
</jsp:include>
</body>
</html>
